<template>
  <div>
    <el-form :inline="true" label-width="120px">
      <el-row type="flex" justify="start">
        <el-col :span="8">
          <el-form-item label="员工账号:">
            <el-input v-model.trim="data.employeeNumber" placeholder="请输入员工账号" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="员工姓名:">
            <el-input v-model.trim="data.name" placeholder="请输入员工姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工作模式:">
            <!-- <el-select placeholder="请选择工作模式">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="月份:">
            <el-date-picker v-model.trim="data.month" type="date" placeholder="选择日期" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属机构:">
            <el-input placeholder="请选择所属机构" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="button">
            <el-button type="primary" @click="getWorkList">搜索</el-button>
            <el-button @click="reSet">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-button type="primary" @click="$router.push('/transit/workArrange-manage/scheduling')">排班设置</el-button>
          <el-button @click="showDialog">绑定排班</el-button>
        </el-col>
        <el-col :span="24">
          <el-table
            ref="multipleTable"
            stripe
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column fixed type="selection" width="55" />
            <el-table-column fixed label="员工账号" width="120" prop="employeeNumber" />
            <el-table-column fixed prop="name" label="姓名" width="120" />
            <el-table-column fixed prop="phone" label="员工电话" width="120" />
            <el-table-column fixed prop="userType" label="员工角色" width="120">
              <template v-slot="{row}">
                <span v-if="row.userType == 1">员工</span>
                <span v-else-if="row.userType == 2">快递员</span>
                <span v-else>司机</span>
              </template>
            </el-table-column>
            <el-table-column fixed width="120px" prop="workPatternName" label="当前工作模式" />
            <el-table-column
              v-for="(item,i) in 30"
              :key="i"
              align="center"
              prop="workSchedules"
              :label="item + '' "
            >
              <template v-slot="{row}">
                <el-avatar v-if="row.workSchedules[i]" class="up" size="small">上</el-avatar>
                <el-avatar v-else size="small">休</el-avatar>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <div class="block">
            <el-pagination
              :current-page="data.page"
              :page-size="data.pageSize"
              :page-sizes="[10,20,30,40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>

      </el-row>
    </el-form>
    <el-dialog
      title="人工调整"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <template>
        <el-radio v-model="workPatternType" label="1">备选项</el-radio>
        <el-radio v-model="workPatternType" label="2">备选项</el-radio>
      </template>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getWorkList, getWorkDate } from '@/api/workArrangeManage'
export default {
  data() {
    return {
      tableData: [],
      data: {
        employeeNumber: '', // 员工账号
        name: '', // 员工姓名
        workPatternId: '', // 工作模式
        month: '', // 月份
        page: 1,
        pageSize: 10
      },
      dialogVisible: false,
      total: 0,
      workList: [],
      workPatternType: '1'
    }
  },
  created() {
    this.getWorkList()
    this.getWorkDate()
  },
  methods: {
    async getWorkList() {
      const res = await getWorkList(this.data)
      this.tableData = res.items
      this.data.page = res.page
      this.data.pageSize = res.pageSize
      this.total = +res.counts
    },
    async getWorkDate() {
      await getWorkDate(this.data)
      // console.log(res)
    },
    handleSizeChange(val) {
      this.data.pageSize = val
      this.getWorkList()
    },
    handleCurrentChange(val) {
      this.data.page = val
      this.getWorkList()
    },
    // 重置
    reSet() {
      this.data.employeeNumber = ''
      this.data.workPatternId = ''
      this.data.name = ''
      this.data.month = ''
      this.getWorkList()
    },
    showDialog() {
      this.dialogVisible = true
    }

  }
}
</script>

<style lang="scss" scoped>
.el-form{
  .el-row{
    background: #fff;
    padding: 20px 20px 0;
    margin-bottom: 20px;
    border-radius: 4px;
    flex-wrap: wrap;
    .el-col{
      margin-bottom: 20px;
    }
    .el-input{
      width: 380px;
    }
    .el-select{
      width: 380px;
    }
    .el-button{
      height: 40px;
      width: 100px;
    }
    .block{
      display: flex;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
}
.el-avatar{
  border: 1px solid #d9dee4;
  background: rgb(239, 243, 248);
  color: #000;
}
.up{
  border: 1px solid #e25738;
  background: #ffeeeb;
  color: #e45576;
}
.el-table{
  border: 1px solid #d9dee4;;
}
</style>

